import { useState, useEffect, useRef, useMemo } from 'react';
import { Button } from 'antd';
import { Table, MF, Form } from 'com';
import menuStore from 'store/menu';
import { AddClass, UpdateClass, GetList } from 'api/class_list';
import { getGradeList } from 'api/dictionary';

export default () => {
    /**
     * 列表
     */
    const [list, setList] = useState([]);
    /**
     * loading
     */
    const [loading, setLoading] = useState(false);
    /**
     * 班级信息
     */
    const [classInfo, setClassInfo] = useState({});
    /**
     * 总条数
     */
    const [total, setTotal] = useState(0);
    /**
     * 搜索模型
     */
    const [searchModel, setSearchModel] = useState({
        pageNo: 1,
        pageSize: 10,
        grade: 0
    });
    /**
     * 年级列表
     */
    const [grades, setGrades] = useState([{ label: '所有', value: 0 }]);
    /**
     * 添加MF引用
     */
    const addMF = useRef();
    /**
     * 列
     */
    const cols = [
        {
            title: '班级名称',
            dataIndex: 'name',
            align: 'center'
        },
        {
            title: '班级人数',
            dataIndex: 'count',
            align: 'center'
        },
        {
            title: '班主任姓名',
            dataIndex: 'teacher_name',
            align: 'center'
        },
        {
            title: '年级',
            dataIndex: 'grade_name',
            align: 'center'
        },
        {
            title: '操作',
            align: 'center',
            width: 130,
            render: (text, row) => <>
                {
                    menuStore.auth('updateClassList') && <Button type="link" size="small" onClick={() => {
                        setClassInfo({ ...row, teacher_id: { id: row.teacher_id, name: row.teacher_name } });
                        addMF.current.show();
                    }}>修改</Button>
                }
            </>
        }
    ]
    /**
     * 搜索表单配置项
     */
    const searchOptions = useMemo(() => ({
        ...(menuStore.auth('classList') ? {
            teacher_id: {
                title: '班主任',
                tag: 'ts',
                clear: true
            },
            grade: {
                title: '班级',
                tag: 'select',
                style: { width: 120 },
                values: grades
            },
            button: {
                text: '搜索',
                tag: 'button',
                type: 'primary',
                htmlType: 'submit',
                loading
            }
        } : {})
        ,
        ...(menuStore.auth('addClassList') ? {
            add: {
                text: '添加班级',
                tag: 'button',
                type: 'primary',
                click: () => {
                    setClassInfo({});
                    addMF.current.show();
                }
            }
        } : {})
    }), [grades, loading]);
    /**
     * 添加修改表单配置项
     */
    const options = useMemo(() => {
        const [a, ...rest] = grades;
        return {
            name: {
                title: '班级名称',
                tag: 'number',
                style: { width: '100%' },
                attrs: { min: 100, max: 999 },
                required: true,
            },
            teacher_id: {
                title: '班主任',
                tag: 'ts',
                required: true
            },
            grade_id: {
                title: '年级',
                tag: 'select',
                required: true,
                values: rest
            }
        }
    }, [grades]);

    menuStore.auth('classList', 'addClassList') && useEffect(() => {
        (async () => {
            try {
                const grades = await getGradeList();
                setGrades(v => [...v, ...grades.map(c => ({ label: c.name, value: c.id }))]);
            } catch (error) { }
        })()
    }, []);

    menuStore.auth('classList') && useEffect(() => {
        (async () => {
            try {
                setLoading(true);
                const { data, total } = await GetList({ ...searchModel });
                setList(data);
                setTotal(total);
            } catch (error) { }
            setLoading(false);
        })()
    }, [searchModel]);

    /**
     * 提交
     * @param {*} values 
     */
    const confirm = async values => {
        addMF.current.start();
        try {
            await (classInfo.id ? UpdateClass : AddClass)({ ...values, id: classInfo.id });
            setSearchModel(v => ({ ...v }));
            addMF.current.hide();
        } catch (error) { }
        addMF.current.stop();
    }

    return <div>
        <h3>班级列表</h3>
        <hr />
        {menuStore.auth('classList', 'addClassList') && <Form options={searchOptions} values={searchModel} onFinish={v => setSearchModel({ ...searchModel, ...v, pageNo: 1 })} attrs={{ layout: 'inline' }} />}
        <p></p>
        {menuStore.auth('classList') && <Table cols={cols} data={list} loading={loading} page={searchModel} total={total} />}
        {menuStore.auth('addClassList', 'updateClassList') && <MF onFinish={confirm} ref={addMF} options={options} title={classInfo.id ? '修改班级' : '添加班级'} lw={80} values={classInfo} />}
    </div>
}